<template>
	<view class="cu-modal bottom-modal" :class="modalName=='couponModal'?'show':''" @tap="hideModal"
		@touchmove.stop.prevent="()=>{return}">
		<view class="cu-dialog" @tap.stop>
			<view class="cu-bar ">
				<view class="text-lg margin-left title-height">
				{{$t('JLink.coupon.coupon')}}
				<view class='cu-tag round bg-orange sm text-sm'>{{$t('JLink.coupon.myCardCoupon')}}</view>
				</view>
			</view>
			<scroll-view  scroll-y :scroll-with-animation="true" :style="{height:scrollHeight}">
				<view v-for="(child,i) in cuoponList" :key="i" class="cu-card article">
					<view class="coupon_flex">
						<view class="radius" v-for="(item,index) in child.col" :key="item.couponId"
							style="position: relative;width: 50%;">
							<view class="cu-item" style="margin: 10upx;padding-bottom:0;">
								<view class="content radius" style="padding:16upx 0;box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.1);"
									:class="item.useTime || item.expire?'bg-k-gray':'bg-white'" @tap.stop="selectCoupon(item)">
									<view class="desc">
										<view class="text-content " style="height:1.5em">
											<view class="text-right margin-right-sm">
												<radio class="primary" :class="couponId===item.couponId?'checked':''" :checked="couponId===item.couponId?true:false" :value="item.couponId.toString()"></radio>
											</view>
										</view>
										<view class="text-center margin-bottom-xs">
											<text :class="item.useTime || item.expire ? '':'text-primary'">
												<text class="text-df">{{item.currencyUnit}}</text>
												<text class="text-ssl">{{item.couponNumPrice}}</text>
												<text class="text-df" v-if="item.couponDecimal!='00'">.{{item.couponDecimal}} </text>
											</text>
											<text class="text-xxs" style="margin-left:8upx">
											{{$t('JLink.coupon.fulfill')}}
											<text>
												<text v-if="item.conditionalDecimal!='00'">{{item.conditionalAmount}}</text>
												<text v-else>{{item.conditionalNumPrice}}</text>
											</text>
											减
												<text v-if="item.couponDecimal!='00'">{{item.couponAmount}}</text>
												<text v-else>{{item.couponNumPrice}}</text>
											</text>
										</view>
										<view style="border-top:1px dashed #D8D8D8;position:relative">
											<view class="text-center text-xs" style="margin-top:10upx;"
												:style="item.useTime || item.expire ? 'color:#fff;':'color:#787878'">
												{{$t('JLink.coupon.ValidUntil')}}：{{item.expireTime}}
											</view>
											<view class="semicircle"></view>
											<view class="semicircle"></view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view v-if="child.col.length===1" class="flex-sub radius"></view>
					</view>
				</view>
			</scroll-view>
			<view>
				<button class="KCARD cu-btn block bg-white text-primary margin-sm lg radius" style="border: 2upx solid #efeded" @tap="submit">{{$t('JLink.publicText.define')}}</button>
			</view>
		</view>
	</view>
</template>

<script>
import {getGlobalProperties} from '@/utils/globalProperties.js'
import {getLocalDate} from '@/utils/index.js'
const {screenHeightModal}=getGlobalProperties()
export default {
    props:{
		modalName:{
			type:String,
			default:''
		},
		list: {
			type: Array,
			default: () => {
				return []
			}
		}
	},
	data() {
	  return {
			couponId: null,
			item:{},
			scrollHeight: screenHeightModal- 220+'rpx',
	  }
	},
	computed:{
		cuoponList(){
			let datas = this.list; //优惠券列表
			let nowDate = new Date().getTime(); //当前时间
			let arr = [{col: []}]; //数据重组
			if (datas.length) {
				let contentsIndex = 0;
				arr = [{col: []}];
				datas.forEach((z, i) => {
					let couponAmount = z.couponAmount ? z.couponAmount.split('.') : [0, 0];
					let conditionalAmount = z.conditionalAmount ? z.conditionalAmount.split('.') : [0, 0];
					z.expire = z.expireTime < nowDate ? true : false; //是否过期
					z.expireTime = z.expireTime ? getLocalDate(z.expireTime,'YYYY-MM-DD HH:mm') : '';
					z.useTime = z.useTime ? getLocalDate(z.useTime, 'YYYY-MM-DD HH:mm') : '';
					z.couponNumPrice = couponAmount[0];//优惠金额(整数)
					z.couponDecimal = couponAmount[1];//优惠金额(小数)
					z.conditionalNumPrice = conditionalAmount[0];//满足条件金额(整数)
					z.conditionalDecimal = conditionalAmount[1];//满足条件金额(小数)
					z.couponCheck = z.checked;//优惠券是否选中
					if (i % 2 == 0 && i != 0) {
						contentsIndex += 1;
						arr[contentsIndex] = {};
					}
					if (arr[contentsIndex].col == undefined) {
					 arr[contentsIndex].col = []
					}
					arr[contentsIndex].col.push(z);
				})
			}
			
			return arr;
		}
	},
    methods: {
	    // 优惠券选择
		selectCoupon (item){
			const {couponId} = item;
			this.cuoponList.forEach(z=>{
				if(z.col.length){
					z.col.forEach((j)=>{
						if(j.couponId===couponId){
							j.couponCheck = !j.couponCheck;//是否选择
							if(!j.couponCheck){
								this.couponId = -1;
								this.item = {
									conditionalAmount: "0.00",
									couponAmount: "0.00",
									couponId: -1,
									currencyUnit: j.currencyUnit
								}
							}else{
								this.couponId = couponId;
								this.item = item;
							}
						}else{
							j.couponCheck = false;
						}
					})
				}
			})
		},
		// 提交事件
		submit(){
			this.$emit('submit',this.item)
		},
		hideModal (){
			this.$emit('hideModal')
		}
  }
}
</script>

<style lang="less" scoped>
.coupon_flex{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
	.title-height{
		height: 1.875rem;
		line-height: 1.875rem;
	}
	.semicircle {
		position: absolute;
		left: -12upx;
		top: -18upx;
		height: 30upx;
		width: 30upx;
		background-color: #F5F5F5;
		border-radius: 50%;
	}
</style>
